<template>
  <div id="login">
    <!--头部返回  -->
    <back />
    <!-- logo -->
    <div class="logo">
      <img src="https://shadow.elemecdn.com/faas/h5/static/logo.ba876fd.png" alt="elemeLOGO" />
    </div>
    <!-- 切换登录 -->
    <div class="container">
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">短信登录</mt-tab-item>
        <mt-tab-item id="2">密码登录</mt-tab-item>
      </mt-navbar>
      <!-- tab-container -->
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div ref="Tel">
            <input
              type="tel"
              placeholder="手机号"
              maxlength="11"
              @focus="changBorder"
              @blur="cancelBorder"
              @keyup="ckeckTel"
              v-model="phone"
            />
            <button class="getCode" ref="codeBtn" disabled="true" @click="getPhoneCode">{{btnText}}</button>
          </div>
          <div ref="Code">
            <input
              type="number"
              placeholder="验证码"
              maxlength="6"
              @focus="changBorder1"
              @blur="cancelBorder1"
            />
          </div>
          <p>
            新用户登录即自动注册，并表示已同意
            <span>《用户服务协议》</span>
          </p>
          <mt-button type="primary" @click="login">登录</mt-button>
          <mt-button type="default">关于我们</mt-button>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div ref="text">
            <input
              type="text"
              placeholder="手机/邮箱/用户名"
              @focus="$refs.text.style.border='1px #26a2ff solid'"
              @blur="$refs.text.style.border=''"
              v-model="username"
            />
          </div>
          <div ref="password">
            <input
              type="password"
              placeholder="密码"
              @focus="$refs.password.style.border='1px #26a2ff solid'"
              @blur="$refs.password.style.border=''"
              v-model="password"
              ref="typePwd"
            />
            <input
              type="text"
              placeholder="密码"
              @focus="$refs.password.style.border='1px #26a2ff solid'"
              @blur="$refs.password.style.border=''"
              v-model="password"
              ref="typeText"
              style="display:none"
            />
            <mt-switch @change="showOrHidden"></mt-switch>
          </div>
          <div ref="writeCode">
            <input
              type="writeCode"
              placeholder="验证码"
              @focus="$refs.writeCode.style.border='1px #26a2ff solid'"
              @blur="$refs.writeCode.style.border=''"
              v-model="captcha_code"
            />
            <img :src="codeimg" ref="codeImg" @click="getCode" />
          </div>
          <p>
            新用户登录即自动注册，并表示已同意
            <span>《用户服务协议》</span>
          </p>
          <mt-button type="primary" @click="login2">登录</mt-button>
          <mt-button type="default">关于我们</mt-button>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  </div>
</template>
<script>
import back from "../../components/back/back";
import { reqCode, reqPwdLogin } from "../../api/index.js";
import { mapActions } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      selected: "1",
      showPwd: false,
      username: "",
      password: "",
      captcha_code: "",
      show: false,
      codeimg: "", //验证码图片URL
      phone: "", //手机号
      countDown: 30,
      btnText: "获取验证码"
    };
  },
  methods: {
    changBorder() {
      this.$refs.Tel.style.border = "1px #26a2ff solid";
    },
    cancelBorder() {
      this.$refs.Tel.style.border = "";
    },
    changBorder1() {
      this.$refs.Code.style.border = "1px #26a2ff solid";
    },
    cancelBorder1() {
      this.$refs.Code.style.border = "";
    },
    //切换显示or隐藏密码
    showOrHidden() {
      this.show = !this.show;
      if (this.show) {
        this.$refs.typePwd.style.display = "none";
        this.$refs.typeText.style.display = "block";
      } else {
        this.$refs.typePwd.style.display = "block";
        this.$refs.typeText.style.display = "none";
      }
    },
    //获取验证码
    async getCode() {
      const res = await reqCode(); // axios.post("https://elm.cangdu.org/v1/captchas").then(res => {
      this.codeimg = res.code; //this.codeimg = res.data.code;
    },
    //检查手机的长度
    ckeckTel() {
      if (/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
        this.$refs.codeBtn.disabled = false;
      } else {
        this.$refs.codeBtn.disabled = true;
      }
    },
    //登录检查
    login() {
      if (this.phone.length != 11) {
        this.$toast("手机号错误");
      }
    },
    //登录方式2
    async login2() {
      const { username, password, captcha_code } = this;
      if (username == "") {
        this.$toast("用户名不能为空");
        return;
      } else if (password == "") {
        this.$toast("密码不能为空");
        return;
      } else if (captcha_code == "") {
        this.$toast("验证码不能为空");
        return;
      }
      /* 密码登录 */
      const res = await reqPwdLogin({ username, password, captcha_code });
      /* 有数据了，说明登录成功 */
      if (res.username) {
        //把用户信息存入vuex
        const userInfo = res;
        console.log("userInfo:" + userInfo);
        this.$store.dispatch("storgeVuexInfo", userInfo);
        //实现跳转
        this.$toast({
          message: "登录成功",
          iconClass: "icon icon-success"
        });
        this.$router.replace("/Profile");
      } else {
        this.$toast(res.message);
      }
    },
    //获取手机验证码
    getPhoneCode() {
      if (this.countDown == 30) {
        this.$refs.codeBtn.disabled = true;
        this.btnText = "已发送" + "(" + this.countDown + ")";
        let timer = setInterval(() => {
          this.countDown--;
          this.btnText = "已发送" + "(" + this.countDown + ")";
          if (this.countDown == 0) {
            clearInterval(timer);
            this.$refs.codeBtn.disabled = false;
            this.btnText = "获取验证码";
            this.countDown = 30;
          }
        }, 1000);
      }
    }
  },
  components: {
    back
  },
  mounted() {
    axios.post("https://elm.cangdu.org/v1/captchas").then(res => {
      this.codeimg = res.data.code;
    });
  }
};
</script>
<style lang="scss" scoped>
#login {
  display: flex;
  justify-content: center;
  flex-flow: wrap;

  .logo {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    img {
      width: 40%;
      height: 100%;
    }
  }
  .container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-flow: wrap;
    .mint-navbar {
      width: 50%;
      .mint-tab-item {
        margin: 0.1rem 0.3rem 0;
        padding-bottom: 5px;
        font-weight: 600;
      }
    }
    .mint-tab-container {
      width: 90%;
      margin-top: 10px;
      .mint-tab-container-item {
        div {
          border: 1px #ddd solid;
          border-radius: 4px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          height: 1rem;
          input {
            flex: 7;
            border: none;
            outline: medium;
            margin-left: 10px;
            height: 80%;
          }
          .getCode {
            background-color: #fff;
            border: none;
            outline: medium;
          }
        }
        p {
          font-size: 16px;
          color: #999999;
          span {
            font-size: 14px;
            color: #26a2ff;
            font-weight: 600;
          }
        }
        .mint-button {
          width: 100%;
        }
        img {
          width: 40%;
          height: 100%;
        }
      }
    }
  }
}
</style>
